<template>
  <!-- 特殊日期选择器 -->
  <div style="display: inline-block;">
    <select class="dateTypeSelect" v-model="dateType" @change="onChangeDateType">
      <option :value="1">按日</option>
      <option :value="2">按周</option>
      <option :value="3">按月</option>
      <option :value="4">按年</option>
    </select>

    <div class="quickName">
      <span
        :class="{selected: !isLast && !isDefine}"
        @click="() => {chooseNowOrLast(false)}"
      >{{quickSearch1}}</span>
      <span
        :class="{selected: isLast && !isDefine}"
        @click="() => {chooseNowOrLast(true)}"
      >{{quickSearch2}}</span>
    </div>

    <a-date-picker
      v-if="dateType === 1"
      :value="cDate"
      :allowClear="false"
      @change="onChangeDay"
      :disabledDate="disabledDate"
    ></a-date-picker>
    <a-week-picker
      v-else-if="dateType === 2"
      :value="cWeek"
      :allowClear="false"
      @change="onChangeWeek"
      :disabledDate="disabledDate"
    ></a-week-picker>
    <a-month-picker
      v-else-if="dateType === 3"
      :value="cMonth"
      :allowClear="false"
      @change="onChangeMonth"
      :disabledDate="disabledDate"
    ></a-month-picker>
    <a-date-picker
      mode="year"
      v-if="dateType === 4"
      :value="year"
      :allowClear="false"
      format="YYYY"
      :open="isopen"
      @openChange="onOpenChange"
      @panelChange="onPanelChange"
      :disabledDate="disabledDate"
    ></a-date-picker>
  </div>
</template>

<script>
import moment from 'moment'

const timeFormat = 'YYYY-MM-DD'
// const timeFormat = 'YYYY-MM-DD 00:00:00'
// const timeFormat = 'YYYY-MM-DD HH:mm:ss'

const quickNames = [
  ['今日', '昨日'],
  ['本周', '上周'],
  ['本月', '上月'],
  ['今年', '去年']
]

export default {
  name: 'date-searcher',
  data () {
    return {
      year: null,
      isopen: false,
      dateType: 1,
      isLast: false,
      isDefine: false, // 是否自选日期
      form: {
        startTime: null,
        endTime: null
      },
      cDate: null,
      cWeek: null,
      cMonth: null
    }
  },
  computed: {
    quickSearch1 () {
      return quickNames[this.dateType - 1][0]
    },
    quickSearch2 () {
      return quickNames[this.dateType - 1][1]
    }
  },
  methods: {
    returnDates () {
      this.$emit('change', this.dateType, [this.form.startTime, this.form.endTime])
    },
    onChangeDateType () {
      this.chooseNowOrLast(false)
    },
    // 本日 昨日
    setDate1 () {
      if (this.isLast) {
        this.cDate = moment().subtract(1, 'd')
        this.form.startTime = this.cDate.format(timeFormat)
        this.form.endTime = this.cDate.endOf('d').format(timeFormat)
      } else {
        this.cDate = moment()
        this.form.startTime = this.cDate.format(timeFormat)
        this.form.endTime = this.cDate.format(timeFormat)
      }
    },
    // '本周', '上周'
    setDate2 () {
      if (this.isLast) {
        this.cWeek = moment().weekday(-7)
        this.form.startTime = moment().weekday(-7).format(timeFormat)
        this.form.endTime = moment().weekday(-1).endOf('d').format(timeFormat)
      } else {
        this.cWeek = moment().weekday(0)
        this.form.startTime = moment().weekday(0).format(timeFormat)
        this.form.endTime = moment().format(timeFormat)
      }
    },
    // '本月', '上月'
    setDate3 () {
      if (this.isLast) {
        this.cMonth = moment().subtract(1, 'month').startOf('month')
        this.form.startTime = moment().subtract(1, 'month').startOf('month').format(timeFormat)
        this.form.endTime = moment().subtract(1, 'month').endOf('month').endOf('d').format(timeFormat)
      } else {
        this.cMonth = moment().startOf('month')
        this.form.startTime = moment().startOf('month').format(timeFormat)
        this.form.endTime = moment().format(timeFormat)
      }
    },
    // '今年', '去年'
    setDate4 () {
      if (this.isLast) {
        this.year = moment().subtract(1, 'year')
        this.form.startTime = moment().subtract(1, 'year').startOf('year').format(timeFormat)
        this.form.endTime = moment().subtract(1, 'year').endOf('year').format(timeFormat)
      } else {
        this.year = moment()
        this.form.startTime = moment().startOf('year').format(timeFormat)
        this.form.endTime = moment().format(timeFormat)
      }
    },
    chooseNowOrLast (f) {
      this.isLast = f
      this.isDefine = false
      if (this.dateType === 1) { // 1按日 2按周 3按月 4按年
        this.setDate1()
      } else if (this.dateType === 2) {
        this.setDate2()
      } else if (this.dateType === 3) {
        this.setDate3()
      } else if (this.dateType === 4) {
        this.setDate4()
      }
      this.returnDates()
    },
    onChangeDay (date, dateStr) {
      if (date) {
        this.form.startTime = date.format(timeFormat)
        this.form.endTime = date.endOf('d').format(timeFormat)
        this.isDefine = true
      }
      this.cDate = date
      this.returnDates()
    },
    onChangeWeek (date, dateStr) {
      // console.log(date.startOf('week').format(timeFormat))
      // console.log(date.endOf('week').format(timeFormat))
      if (date) {
        this.form.startTime = date.startOf('week').format(timeFormat)
        this.form.endTime = date.endOf('week').format(timeFormat)
        this.isDefine = true
      }
      this.cWeek = date
      this.returnDates()
    },
    onChangeMonth (date, dateStr) {
      if (date) {
        this.form.startTime = date.startOf('month').format(timeFormat)
        this.form.endTime = date.endOf('month').format(timeFormat)
        this.isDefine = true
      }
      this.cMonth = date
      this.returnDates()
    },
    // 年份
    onOpenChange (status) {
      this.isopen = status
    },
    onPanelChange (v) {
      if (moment().endOf('year') < v) {
        this.$message.error('不可选今年之后的年份')
        return false
      }
      if (v) {
        this.form.startTime = v.startOf('year').format(timeFormat)
        this.form.endTime = v.endOf('year').format(timeFormat)
        this.isDefine = true
      }
      this.year = v
      this.isopen = false
      this.returnDates()
    },
    disabledDate (currentDate) {
      return currentDate && currentDate >= moment().endOf('day')
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setDate1()
      this.returnDates()
    })
  }
}
</script>

<style lang="less" scoped>
.dateTypeSelect {
  outline: none;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  height: 29px;
  line-height: 25px;
  padding: 2px;
}

.quickName {
  display: inline-block;
  margin: 0 8px;

  span {
    margin: 0 5px;
    cursor: pointer;

    &.selected {
      color: #3398db;
    }
  }
}
</style>
